<template>
  <view class="task-detail-page">

    <!-- 任务状态与基本信息 -->
    <view class="task-status-bar" :class="taskStatusClass">
      <view class="status-label">
        <text class="status-text">{{ task.statusText }}</text>
        <uni-icons type="arrow-right" size="14" class="status-arrow"></uni-icons>
      </view>
      <view class="status-time">
        <text>发布于 {{ task.publishTime }}</text>
      </view>
    </view>

    <view class="task-header-card">
      <view class="task-title">{{ task.title }}</view>
      
      <view class="task-meta">
        <view class="meta-item">
          <uni-icons type="map-pin" size="16" class="meta-icon"></uni-icons>
          <text>{{ task.location }}</text>
        </view>
        <view class="meta-item">
          <uni-icons type="clock" size="16" class="meta-icon"></uni-icons>
          <text>{{ task.schedule }}</text>
        </view>
        <view class="meta-item">
          <uni-icons type="tag" size="16" class="meta-icon"></uni-icons>
          <text>{{ task.categoryText }}</text>
        </view>
      </view>
      
      <view class="task-reward">
        <view class="reward-label">任务报酬</view>
        <view class="reward-amount">¥{{ task.rewardAmount }} <text class="reward-unit">{{ task.rewardUnit }}</text></view>
      </view>
      
      <view class="publisher-info">
        <image :src="task.publisher.avatar" alt="发布者头像" class="publisher-avatar"></image>
        <view class="publisher-detail">
          <view class="publisher-name">
            <text>{{ task.publisher.name }}</text>
            <view class="verified-badge" v-if="task.publisher.verified">
              <uni-icons type="checkmark-circle" size="14" color="#165DFF"></uni-icons>
            </view>
          </view>
          <view class="publisher-level">
            <uni-icons type="star" size="12" color="#FFD700" filled></uni-icons>
            <text>{{ task.publisher.level }}级发布者</text>
          </view>
        </view>
        <view class="contact-publisher" @click="contactPublisher">
          <text>联系发布者</text>
        </view>
      </view>
    </view>

    <!-- 任务详情内容 -->
    <view class="task-content">
      <!-- 任务描述 -->
      <view class="content-section">
        <view class="section-title">
          <uni-icons type="clipboard" size="18" class="title-icon"></uni-icons>
          <text>任务描述</text>
        </view>
        <view class="section-content description-content">
          <view class="description-item" v-for="(item, index) in task.description" :key="index">
            <text>{{ item }}</text>
          </view>
          
          <view class="task-attachments" v-if="task.attachments.length > 0">
            <view class="attachment-title">相关附件</view>
            <view class="attachment-list">
              <view class="attachment-item" v-for="(attach, i) in task.attachments" :key="i" @click="downloadAttachment(attach)">
                <uni-icons :type="getAttachmentIcon(attach.type)" size="20" class="attachment-icon"></uni-icons>
                <view class="attachment-info">
                  <view class="attachment-name">{{ attach.name }}</view>
                  <view class="attachment-size">{{ formatFileSize(attach.size) }}</view>
                </view>
                <uni-icons type="download" size="18" class="download-icon"></uni-icons>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 任务要求 -->
      <view class="content-section">
        <view class="section-title">
          <uni-icons type="list" size="18" class="title-icon"></uni-icons>
          <text>任务要求</text>
        </view>
        <view class="section-content">
          <view class="requirements-list">
            <view class="requirement-item" v-for="(req, i) in task.requirements" :key="i">
              <view class="requirement-icon">
                <uni-icons type="circle" size="16" class="icon-unchecked"></uni-icons>
                <uni-icons type="checkmark" size="16" class="icon-checked"></uni-icons>
              </view>
              <view class="requirement-content">
                <text>{{ req }}</text>
              </view>
            </view>
          </view>
          
          <view class="equipment-requirements">
            <view class="requirement-subtitle">设备要求</view>
            <view class="equipment-tags">
              <view class="equipment-tag" v-for="(equip, i) in task.requiredEquipment" :key="i">
                {{ equip }}
              </view>
            </view>
          </view>
          
          <view class="license-requirements">
            <view class="requirement-subtitle">资质要求</view>
            <view class="license-tags">
              <view class="license-tag" v-for="(license, i) in task.requiredLicenses" :key="i">
                {{ license }}
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 交付标准 -->
      <view class="content-section">
        <view class="section-title">
          <uni-icons type="checkmark-circle" size="18" class="title-icon"></uni-icons>
          <text>交付标准</text>
        </view>
        <view class="section-content">
          <view class="delivery-item">
            <view class="delivery-label">交付内容</view>
            <view class="delivery-content">
              <view class="content-tag" v-for="(item, i) in task.deliveryContent" :key="i">
                {{ item }}
              </view>
            </view>
          </view>
          
          <view class="delivery-item">
            <view class="delivery-label">交付格式</view>
            <view class="delivery-content">
              <text>{{ task.deliveryFormat }}</text>
            </view>
          </view>
          
          <view class="delivery-item">
            <view class="delivery-label">交付方式</view>
            <view class="delivery-content">
              <text>{{ task.deliveryMethod }}</text>
            </view>
          </view>
          
          <view class="delivery-item">
            <view class="delivery-label">验收标准</view>
            <view class="delivery-content">
              <view class="standard-point" v-for="(point, i) in task.acceptanceCriteria" :key="i">
                <view class="point-icon"></view>
                <text class="point-text">{{ point }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 任务地点 -->
      <view class="content-section">
        <view class="section-title">
          <uni-icons type="map" size="18" class="title-icon"></uni-icons>
          <text>任务地点</text>
        </view>
        <view class="section-content">
          <view class="location-map" @click="openMap">
            <image src="https://picsum.photos/id/1019/800/400" alt="任务地点地图" class="map-image"></image>
            <view class="map-overlay">
              <uni-icons type="map-pin" size="36" color="#FF4D4F"></uni-icons>
            </view>
            <view class="view-map-btn">查看地图</view>
          </view>
          
          <view class="location-details">
            <view class="detail-item">
              <view class="detail-label">详细地址</view>
              <view class="detail-value">{{ task.locationDetail }}</view>
            </view>
            <view class="detail-item">
              <view class="detail-label">禁飞区情况</view>
              <view class="detail-value">
                <text :class="task.noFlyZone ? 'no-fly' : 'fly-allowed'">
                  {{ task.noFlyZone ? '附近有禁飞区，需提前申请' : '无禁飞区限制' }}
                </text>
              </view>
            </view>
            <view class="detail-item">
              <view class="detail-label">场地条件</view>
              <view class="detail-value">{{ task.siteConditions }}</view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 申请记录 -->
      <view class="content-section" v-if="task.status === 'pending' && task.applicationRecords.length > 0">
        <view class="section-title">
          <uni-icons type="user-list" size="18" class="title-icon"></uni-icons>
          <text>申请记录</text>
        </view>
        <view class="section-content">
          <view class="application-list">
            <view class="application-item" v-for="(app, i) in task.applicationRecords" :key="i">
              <image :src="app.pilot.avatar" alt="申请人头像" class="applicant-avatar"></image>
              <view class="applicant-info">
                <view class="applicant-name">{{ app.pilot.name }}</view>
                <view class="applicant-skills">
                  <view class="skill-tag" v-for="(skill, idx) in app.pilot.skills.slice(0, 3)" :key="idx">
                    {{ skill }}
                  </view>
                  <view class="more-skills" v-if="app.pilot.skills.length > 3">
                    +{{ app.pilot.skills.length - 3 }}
                  </view>
                </view>
              </view>
              <view class="application-info">
                <view class="application-time">{{ app.applyTime }}</view>
                <view class="application-status" :class="app.status === 'pending' ? 'status-pending' : 'status-selected'">
                  {{ app.statusText }}
                </view>
              </view>
            </view>
          </view>
          <view class="view-all-applications" @click="viewAllApplications">
            查看全部 {{ task.applicationCount }} 条申请
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作按钮 -->
    <view class="action-bar" :class="taskStatus === 'completed' ? 'completed' : ''">
      <template v-if="task.status === 'pending'">
        <button class="action-btn favorite-btn" @click="toggleFavorite">
          <uni-icons type="heart" size="18" :color="task.isFavorite ? '#FF4D4F' : '#86909C'" :filled="task.isFavorite"></uni-icons>
          <text>{{ task.isFavorite ? '已收藏' : '收藏任务' }}</text>
        </button>
        <button class="action-btn apply-btn" @click="applyForTask">
          申请任务
        </button>
      </template>
      
      <template v-if="task.status === 'accepted'">
        <button class="action-btn cancel-btn" @click="showCancelConfirm">
          取消任务
        </button>
        <button class="action-btn complete-btn" @click="completeTask">
          完成任务
        </button>
      </template>
      
      <template v-if="task.status === 'completed'">
        <button class="action-btn review-btn" @click="gotoReview">
          查看评价
        </button>
      </template>
    </view>

    <!-- 申请任务弹窗 -->
    <view class="apply-modal" v-if="showApplyModal">
      <view class="modal-mask" @click="closeApplyModal"></view>
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">申请任务</text>
          <uni-icons type="close" size="22" class="modal-close" @click="closeApplyModal"></uni-icons>
        </view>
        
        <view class="apply-form">
          <view class="form-item">
            <text class="form-label">申请说明</text>
            <textarea 
              class="form-input" 
              placeholder="请简要介绍您的相关经验和优势，提高申请成功率"
              v-model="applyDescription"
              maxlength="300"
            ></textarea>
            <text class="input-count">{{ applyDescription.length }}/300</text>
          </view>
          
          <view class="form-item">
            <text class="form-label">可执行时间</text>
            <view class="date-picker" @click="openDatePicker">
              <text class="picker-text">{{ selectedDate || '请选择可执行日期' }}</text>
              <uni-icons type="calendar" size="18" class="picker-icon"></uni-icons>
            </view>
          </view>
          
          <view class="form-item">
            <text class="form-label">使用设备</text>
            <view class="equipment-selector">
              <view class="selected-equipments">
                <view 
                  class="selected-equipment" 
                  v-for="(equip, i) in selectedEquipments" 
                  :key="i"
                  @click.stop="removeEquipment(i)"
                >
                  <text>{{ equip }}</text>
                  <uni-icons type="close" size="14" class="remove-icon"></uni-icons>
                </view>
                <view class="add-equipment" @click="openEquipmentSelector" v-if="selectedEquipments.length < 5">
                  <uni-icons type="plus" size="16"></uni-icons>
                </view>
              </view>
            </view>
          </view>
        </view>
        
        <button class="submit-apply-btn" @click="submitApplication" :disabled="!canSubmitApply">
          提交申请
        </button>
      </view>
    </view>

    <!-- 取消任务确认弹窗 -->
    <view class="confirm-modal" v-if="showCancelConfirm">
      <view class="modal-mask" @click="closeCancelConfirm"></view>
      <view class="confirm-content">
        <view class="confirm-title">确认取消任务？</view>
        <view class="confirm-message">
          取消任务可能会影响您的信誉评级，是否确定要取消？
        </view>
        <view class="confirm-actions">
          <view class="cancel-btn" @click="closeCancelConfirm">
            取消
          </view>
          <view class="confirm-btn" @click="confirmCancelTask">
            确认取消
          </view>
        </view>
      </view>
    </view>

    <!-- 设备选择器弹窗 -->
    <view class="equipment-modal" v-if="showEquipmentSelector">
      <view class="modal-mask" @click="closeEquipmentSelector"></view>
      <view class="equipment-content">
        <view class="modal-header">
          <text class="modal-title">选择设备</text>
          <uni-icons type="close" size="22" class="modal-close" @click="closeEquipmentSelector"></uni-icons>
        </view>
        
        <view class="equipment-list">
          <view 
            class="equipment-option" 
            v-for="(equip, i) in allEquipments" 
            :key="i"
            :class="selectedEquipments.includes(equip) ? 'selected' : ''"
            @click="toggleEquipment(equip)"
          >
            <text>{{ equip }}</text>
            <uni-icons 
              type="checkmark" 
              size="20" 
              class="option-check" 
              v-if="selectedEquipments.includes(equip)"
            ></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <!-- 操作菜单 -->
    <view class="action-sheet" v-if="showActionSheet">
      <view class="sheet-mask" @click="hideActionSheet"></view>
      <view class="sheet-content">
        <view class="sheet-item" @click="reportTask">
          <uni-icons type="alert" size="20" class="sheet-icon"></uni-icons>
          <text>举报任务</text>
        </view>
        <view class="sheet-item" @click="shareTask">
          <uni-icons type="share" size="20" class="sheet-icon"></uni-icons>
          <text>分享任务</text>
        </view>
        <view class="sheet-item cancel-item" @click="hideActionSheet">
          <text>取消</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 任务ID，从路由参数获取
      taskId: '',
      
      // 任务详情数据
      task: {
        id: 2001,
        title: '城市建筑三维建模数据采集',
        status: 'pending', // pending: 待接单, accepted: 进行中, completed: 已完成
        statusText: '待接单',
        publishTime: '2023-11-10 09:30',
        location: '上海市·浦东新区',
        locationDetail: '浦东新区世纪大道1号附近区域',
        schedule: '2023-11-15 至 2023-11-20',
        category: 'mapping',
        categoryText: '测绘建模',
        rewardAmount: 8000,
        rewardUnit: '元',
        isFavorite: false,
        noFlyZone: true,
        siteConditions: '开阔场地，周边无高大障碍物，需避开早晚高峰期',
        
        publisher: {
          id: 301,
          name: '城市规划设计院',
          avatar: 'https://picsum.photos/id/1025/100/100',
          verified: true,
          level: 5
        },
        
        description: [
          '对浦东新区核心区域约2平方公里范围进行建筑三维建模数据采集',
          '要求获取高清影像数据和点云数据，建模精度需达到5cm',
          '需按照指定航线进行飞行，确保数据覆盖完整无遗漏',
          '需避开人流密集时段作业，确保飞行安全'
        ],
        
        attachments: [
          {
            id: 1,
            name: '任务区域范围图.pdf',
            type: 'pdf',
            size: 2048000,
            url: '/attachments/area_map.pdf'
          },
          {
            id: 2,
            name: '航线规划示例.kml',
            type: 'kml',
            size: 512000,
            url: '/attachments/route_example.kml'
          }
        ],
        
        requirements: [
          '持有CAAC无人机驾驶员执照（A2及以上级别）',
          '有3年以上测绘建模飞行经验',
          '熟悉数据采集流程和质量控制标准',
          '作业期间需购买第三方责任险',
          '需提交飞行前检查清单和应急预案'
        ],
        
        requiredEquipment: [
          'RTK无人机（如大疆Phantom 4 RTK）',
          '高精度GNSS基站',
          '备用电池（至少4块）',
          '数据存储设备（≥500GB）',
          '地面站软件'
        ],
        
        requiredLicenses: [
          'CAAC 驾驶员执照',
          '测绘作业许可证（可选）'
        ],
        
        deliveryContent: ['原始影像数据', '点云数据', '飞行日志', '数据质量报告'],
        deliveryFormat: '原始数据+处理后数据，存储于移动硬盘交付',
        deliveryMethod: '现场交付+云端备份',
        acceptanceCriteria: [
          '数据覆盖率100%，无明显漏洞',
          '建模精度达到5cm，满足设计要求',
          '数据无扭曲、错位等质量问题',
          '飞行日志完整，符合航空管理要求'
        ],
        
        applicationRecords: [
          {
            id: 101,
            pilot: {
              id: 1001,
              name: '张明',
              avatar: 'https://picsum.photos/id/1012/100/100',
              skills: ['测绘建模', 'RTK操作', '数据处理', '航线规划']
            },
            applyTime: '2023-11-10 10:15',
            status: 'pending',
            statusText: '待审核'
          },
          {
            id: 102,
            pilot: {
              id: 1002,
              name: '李强',
              avatar: 'https://picsum.photos/id/1013/100/100',
              skills: ['三维建模', '无人机测绘', '地形分析']
            },
            applyTime: '2023-11-10 11:30',
            status: 'pending',
            statusText: '待审核'
          }
        ],
        applicationCount: 5
      },
      
      // 弹窗状态
      showApplyModal: false,
      showCancelConfirm: false,
      showEquipmentSelector: false,
      showActionSheet: false,
      
      // 申请表单数据
      applyDescription: '',
      selectedDate: '',
      selectedEquipments: [],
      
      // 所有可选设备
      allEquipments: [
        '大疆 Phantom 4 RTK',
        '大疆 Matrice 300 RTK',
        '大疆 P1 相机',
        'Trimble GNSS基站',
        '大疆 D-RTK 2 移动站',
        '其他RTK无人机',
        '地面站软件'
      ]
    };
  },
  
  computed: {
    // 任务状态样式类
    taskStatusClass() {
      switch(this.task.status) {
        case 'pending':
          return 'status-pending';
        case 'accepted':
          return 'status-accepted';
        case 'completed':
          return 'status-completed';
        default:
          return 'status-pending';
      }
    },
    
    // 是否可以提交申请
    canSubmitApply() {
      return this.applyDescription.length > 0 && 
             this.selectedDate && 
             this.selectedEquipments.length > 0;
    }
  },
  
  onLoad(options) {
    // 获取任务ID
    this.taskId = options.id || '';
    // 实际项目中这里应该根据ID请求接口获取任务详情
    this.loadTaskDetail();
	uni.setNavigationBarTitle({
		title:options.title
	})
  },
  
  methods: {
    // 加载任务详情
    loadTaskDetail() {
      // 模拟API请求
      setTimeout(() => {
        console.log(`加载任务ID为${this.taskId}的详情`);
        // 这里使用模拟数据
      }, 800);
    },
    
    // 返回上一页
    navBack() {
      uni.navigateBack();
    },
    
    // 显示操作菜单
    showActionSheet() {
      this.showActionSheet = true;
    },
    
    // 隐藏操作菜单
    hideActionSheet() {
      this.showActionSheet = false;
    },
    
    // 举报任务
    reportTask() {
      this.hideActionSheet();
      uni.showModal({
        title: '举报任务',
        content: '请选择举报原因',
        // 实际项目中这里会显示举报原因选择
        showCancel: true,
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '举报已提交',
              icon: 'none'
            });
          }
        }
      });
    },
    
    // 分享任务
    shareTask() {
      this.hideActionSheet();
      uni.share({
        title: this.task.title,
        content: `我发现了一个${this.task.rewardAmount}元的无人机任务，快来看看吧！`,
        success: () => {
          uni.showToast({
            title: '分享成功',
            icon: 'none'
          });
        }
      });
    },
    
    // 联系发布者
    contactPublisher() {
      uni.navigateTo({
        url: `/pages/chat/chat?id=${this.task.publisher.id}&name=${this.task.publisher.name}`
      });
    },
    
    // 下载附件
    downloadAttachment(attach) {
      uni.showLoading({
        title: '正在下载...'
      });
      
      // 模拟下载
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: `已开始下载${attach.name}`,
          icon: 'none'
        });
      }, 1500);
    },
    
    // 获取附件图标
    getAttachmentIcon(type) {
      switch(type.toLowerCase()) {
        case 'pdf':
          return 'document';
        case 'kml':
        case 'kmz':
          return 'map';
        case 'doc':
        case 'docx':
          return 'file-text';
        case 'xls':
        case 'xlsx':
          return 'file-excel';
        default:
          return 'download';
      }
    },
    
    // 格式化文件大小
    formatFileSize(bytes) {
      if (bytes < 1024) return bytes + ' B';
      else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
      else return (bytes / 1048576).toFixed(1) + ' MB';
    },
    
    // 打开地图
    openMap() {
      uni.openLocation({
        latitude: 31.230416, // 示例纬度
        longitude: 121.505821, // 示例经度
        name: this.task.location,
        address: this.task.locationDetail,
        scale: 16
      });
    },
    
    // 查看所有申请
    viewAllApplications() {
      uni.navigateTo({
        url: `/pages/tasks/application-list?taskId=${this.task.id}`
      });
    },
    
    // 收藏/取消收藏任务
    toggleFavorite() {
      this.task.isFavorite = !this.task.isFavorite;
      uni.showToast({
        title: this.task.isFavorite ? '收藏成功' : '取消收藏',
        icon: 'none'
      });
    },
    
    // 申请任务
    applyForTask() {
      this.showApplyModal = true;
    },
    
    // 关闭申请弹窗
    closeApplyModal() {
      this.showApplyModal = false;
    },
    
    // 打开日期选择器
    openDatePicker() {
      const minDate = new Date();
      const maxDate = new Date();
      maxDate.setMonth(maxDate.getMonth() + 1); // 最大可选1个月后
      
      uni.datePicker({
        startDate: minDate,
        endDate: maxDate,
        success: (res) => {
          this.selectedDate = res.date;
        }
      });
    },
    
    // 打开设备选择器
    openEquipmentSelector() {
      this.showEquipmentSelector = true;
    },
    
    // 关闭设备选择器
    closeEquipmentSelector() {
      this.showEquipmentSelector = false;
    },
    
    // 切换设备选择状态
    toggleEquipment(equipment) {
      const index = this.selectedEquipments.indexOf(equipment);
      if (index > -1) {
        this.selectedEquipments.splice(index, 1);
      } else {
        if (this.selectedEquipments.length < 5) {
          this.selectedEquipments.push(equipment);
        } else {
          uni.showToast({
            title: '最多选择5个设备',
            icon: 'none'
          });
        }
      }
    },
    
    // 移除已选设备
    removeEquipment(index) {
      this.selectedEquipments.splice(index, 1);
    },
    
    // 提交申请
    submitApplication() {
      if (!this.canSubmitApply) return;
      
      uni.showLoading({
        title: '提交中...'
      });
      
      // 模拟提交申请
      setTimeout(() => {
        uni.hideLoading();
        this.closeApplyModal();
        
        // 显示申请成功提示
        uni.showToast({
          title: '申请已提交',
          icon: 'none',
          duration: 2000
        });
        
        // 重置表单
        this.applyDescription = '';
        this.selectedDate = '';
        this.selectedEquipments = [];
      }, 1500);
    },
    
    // 显示取消确认
    showCancelConfirm() {
      this.showCancelConfirm = true;
    },
    
    // 关闭取消确认
    closeCancelConfirm() {
      this.showCancelConfirm = false;
    },
    
    // 确认取消任务
    confirmCancelTask() {
      this.closeCancelConfirm();
      
      uni.showLoading({
        title: '处理中...'
      });
      
      // 模拟取消任务
      setTimeout(() => {
        uni.hideLoading();
        this.task.status = 'pending';
        this.task.statusText = '待接单';
        
        uni.showToast({
          title: '任务已取消',
          icon: 'none'
        });
      }, 1500);
    },
    
    // 完成任务
    completeTask() {
      uni.navigateTo({
        url: `/pages/tasks/submit-task?taskId=${this.task.id}`
      });
    },
    
    // 查看评价
    gotoReview() {
      uni.navigateTo({
        url: `/pages/tasks/task-review?taskId=${this.task.id}`
      });
    }
  }
};
</script>

<style scoped lang="scss">
// 颜色变量
$primary: #165DFF;
$primary-light: #E8F3FF;
$danger: #FF4D4F;
$warning: #FF7D00;
$success: #00B42A;
$text-primary: #1D2129;
$text-secondary: #4E5969;
$text-tertiary: #86909C;
$bg-light: #F5F7FA;
$bg-white: #FFFFFF;
$border-light: #E5E6EB;
$shadow-light: 0 2px 10px rgba(0, 0, 0, 0.05);

.task-detail-page {
  background-color: $bg-light;
  min-height: 100vh;
  padding-top: var(--status-bar-height);
  padding-bottom: 80px; // 为底部按钮留出空间
}

// 导航栏
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 16px;
  background-color: $bg-white;
  border-bottom: 1px solid $border-light;
  
  .back-btn, .more-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    
    &:active {
      background-color: $bg-light;
    }
  }
  
  .nav-title {
    font-size: 18px;
    font-weight: 600;
    color: $text-primary;
  }
}

// 任务状态栏
.task-status-bar {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-size: 14px;
  
  &.status-pending {
    background-color: rgba(22, 93, 255, 0.1);
    color: $primary;
  }
  
  &.status-accepted {
    background-color: rgba(255, 125, 0, 0.1);
    color: $warning;
  }
  
  &.status-completed {
    background-color: rgba(0, 180, 42, 0.1);
    color: $success;
  }
  
  .status-label {
    display: flex;
    align-items: center;
    font-weight: 500;
    
    .status-arrow {
      margin-left: 6px;
    }
  }
  
  .status-time {
    color: inherit;
    opacity: 0.8;
  }
}

// 任务头部卡片
.task-header-card {
  background-color: $bg-white;
  padding: 16px;
  margin-bottom: 16px;
  
  .task-title {
    font-size: 20px;
    font-weight: 600;
    color: $text-primary;
    margin-bottom: 16px;
    line-height: 1.3;
  }
  
  .task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-bottom: 20px;
    
    .meta-item {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: $text-secondary;
      
      .meta-icon {
        margin-right: 6px;
        color: $primary;
      }
    }
  }
  
  .task-reward {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-top: 16px;
    border-top: 1px dashed $border-light;
    
    .reward-label {
      font-size: 14px;
      color: $text-tertiary;
      margin-right: 12px;
    }
    
    .reward-amount {
      font-size: 22px;
      font-weight: 700;
      color: $danger;
      
      .reward-unit {
        font-size: 16px;
        margin-left: 2px;
      }
    }
  }
  
  .publisher-info {
    display: flex;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid $border-light;
    
    .publisher-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 12px;
    }
    
    .publisher-detail {
      flex: 1;
      
      .publisher-name {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: 500;
        color: $text-primary;
        margin-bottom: 4px;
        
        .verified-badge {
          margin-left: 6px;
        }
      }
      
      .publisher-level {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: $text-tertiary;
        
        text {
          margin-left: 4px;
        }
      }
    }
    
    .contact-publisher {
      color: $primary;
      font-size: 14px;
      padding: 6px 12px;
      border: 1px solid $primary;
      border-radius: 4px;
      
      &:active {
        background-color: $primary-light;
      }
    }
  }
}

// 任务内容区域
.task-content {
  padding: 0 16px;
  
  .content-section {
    background-color: $bg-white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
  }
  
  .section-title {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color: $text-primary;
    margin-bottom: 16px;
    
    .title-icon {
      margin-right: 8px;
      color: $primary;
    }
  }
  
  .section-content {
    color: $text-secondary;
    font-size: 14px;
    line-height: 1.6;
  }
}

// 任务描述
.description-content {
  .description-item {
    margin-bottom: 12px;
    text-align: justify;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .task-attachments {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid $border-light;
    
    .attachment-title {
      font-size: 15px;
      font-weight: 500;
      color: $text-primary;
      margin-bottom: 12px;
    }
    
    .attachment-list {
      .attachment-item {
        display: flex;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px dashed $border-light;
        
        &:last-child {
          border-bottom: none;
        }
        
        &:active {
          background-color: $bg-light;
        }
        
        .attachment-icon {
          color: $primary;
          margin-right: 12px;
        }
        
        .attachment-info {
          flex: 1;
          
          .attachment-name {
            font-size: 14px;
            color: $text-primary;
            margin-bottom: 2px;
          }
          
          .attachment-size {
            font-size: 12px;
            color: $text-tertiary;
          }
        }
        
        .download-icon {
          color: $text-tertiary;
        }
      }
    }
  }
}

// 任务要求
.requirements-list {
  margin-bottom: 20px;
  
  .requirement-item {
    display: flex;
    margin-bottom: 12px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .requirement-icon {
      position: relative;
      width: 20px;
      height: 20px;
      margin-right: 12px;
      margin-top: 3px;
      
      .icon-unchecked {
        position: absolute;
        top: 0;
        left: 0;
        color: $border-light;
      }
      
      .icon-checked {
        position: absolute;
        top: 0;
        left: 0;
        color: $primary;
        opacity: 0;
      }
    }
  }
}

.equipment-requirements, .license-requirements {
  margin-bottom: 20px;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .requirement-subtitle {
    font-size: 15px;
    font-weight: 500;
    color: $text-primary;
    margin-bottom: 10px;
  }
  
  .equipment-tags, .license-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .equipment-tag {
    background-color: rgba(0, 180, 42, 0.1);
    color: $success;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
  }
  
  .license-tag {
    background-color: rgba(22, 93, 255, 0.1);
    color: $primary;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
  }
}

// 交付标准
.delivery-item {
  margin-bottom: 16px;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .delivery-label {
    font-size: 15px;
    font-weight: 500;
    color: $text-primary;
    margin-bottom: 8px;
    display: block;
  }
  
  .delivery-content {
    padding-left: 4px;
    
    .content-tag {
      display: inline-block;
      background-color: $bg-light;
      color: $text-secondary;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 13px;
      margin-right: 8px;
      margin-bottom: 8px;
    }
  }
  
  .standard-point {
    display: flex;
    margin-bottom: 10px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .point-icon {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: $primary;
    margin-top: 8px;
    margin-right: 10px;
    flex-shrink: 0;
  }
}

// 任务地点
.location-map {
  position: relative;
  width: 100%;
  height: 180px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
  
  .map-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .map-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .view-map-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: $primary;
    color: white;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 4px;
  }
}

.location-details {
  .detail-item {
    display: flex;
    margin-bottom: 12px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .detail-label {
      width: 90px;
      font-size: 14px;
      color: $text-tertiary;
      flex-shrink: 0;
    }
    
    .detail-value {
      flex: 1;
      font-size: 14px;
      color: $text-secondary;
      
      .no-fly {
        color: $danger;
      }
      
      .fly-allowed {
        color: $success;
      }
    }
  }
}

// 申请记录
.application-list {
  margin-bottom: 16px;
  
  .application-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid $border-light;
    
    &:last-child {
      border-bottom: none;
    }
    
    .applicant-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 12px;
    }
    
    .applicant-info {
      flex: 1;
      
      .applicant-name {
        font-size: 15px;
        font-weight: 500;
        color: $text-primary;
        margin-bottom: 6px;
      }
      
      .applicant-skills {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        
        .skill-tag {
          background-color: $bg-light;
          color: $text-secondary;
          font-size: 12px;
          padding: 2px 8px;
          border-radius: 4px;
        }
        
        .more-skills {
          background-color: $bg-light;
          color: $text-tertiary;
          font-size: 12px;
          padding: 2px 6px;
          border-radius: 4px;
        }
      }
    }
    
    .application-info {
      text-align: right;
      
      .application-time {
        font-size: 12px;
        color: $text-tertiary;
        margin-bottom: 4px;
        display: block;
      }
      
      .application-status {
        font-size: 12px;
        padding: 2px 8px;
        border-radius: 4px;
        
        &.status-pending {
          background-color: $primary-light;
          color: $primary;
        }
        
        &.status-selected {
          background-color: $success;
          color: white;
        }
      }
    }
  }
}

.view-all-applications {
  text-align: center;
  color: $primary;
  font-size: 14px;
  padding: 8px 0;
}

// 底部操作按钮
.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background-color: $bg-white;
  padding: 12px 16px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  
  &.completed {
    justify-content: center;
  }
  
  .action-btn {
    height: 48px;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .favorite-btn {
    flex: 1;
    background-color: white;
    color: $text-tertiary;
    border: 1px solid $border-light;
    margin-right: 10px;
    
    uni-icons {
      margin-right: 8px;
    }
    
    &:active {
      background-color: $bg-light;
    }
  }
  
  .apply-btn {
    flex: 2;
    background-color: $primary;
    color: white;
    border: none;
    
    &:active {
      background-color: #0E42D2;
    }
  }
  
  .cancel-btn {
    flex: 1;
    background-color: white;
    color: $danger;
    border: 1px solid $danger;
    margin-right: 10px;
    
    &:active {
      background-color: rgba(255, 77, 79, 0.1);
    }
  }
  
  .complete-btn {
    flex: 2;
    background-color: $success;
    color: white;
    border: none;
    
    &:active {
      background-color: #008722;
    }
  }
  
  .review-btn {
    width: 100%;
    background-color: $primary;
    color: white;
    border: none;
    
    &:active {
      background-color: #0E42D2;
    }
  }
}

// 申请任务弹窗
.apply-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  
  .modal-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s;
  }
  
  .modal-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: $bg-white;
    border-radius: 16px 16px 0 0;
    padding: 20px 16px;
    max-height: 85vh;
    overflow-y: auto;
    animation: slideUp 0.3s;
  }
  
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .modal-title {
      font-size: 18px;
      font-weight: 600;
      color: $text-primary;
    }
    
    .modal-close {
      color: $text-tertiary;
    }
  }
  
  .apply-form {
    .form-item {
      margin-bottom: 20px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .form-label {
        display: block;
        font-size: 15px;
        font-weight: 500;
        color: $text-primary;
        margin-bottom: 10px;
      }
      
      .form-input {
        width: 100%;
        height: 120px;
        padding: 12px;
        border: 1px solid $border-light;
        border-radius: 8px;
        font-size: 14px;
        color: $text-primary;
        resize: none;
        box-sizing: border-box;
        
        &::placeholder {
          color: $text-tertiary;
        }
      }
      
      .input-count {
        display: block;
        text-align: right;
        font-size: 12px;
        color: $text-tertiary;
        margin-top: 8px;
      }
      
      .date-picker {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        border: 1px solid $border-light;
        border-radius: 8px;
        font-size: 14px;
        color: $text-primary;
        
        .picker-text {
          flex: 1;
        }
        
        .picker-icon {
          color: $text-tertiary;
        }
      }
      
      .equipment-selector {
        .selected-equipments {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          min-height: 44px;
          padding: 6px;
          border: 1px solid $border-light;
          border-radius: 8px;
          
          .selected-equipment {
            display: flex;
            align-items: center;
            background-color: $primary-light;
            color: $primary;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 14px;
            
            .remove-icon {
              margin-left: 6px;
              font-size: 12px;
            }
          }
          
          .add-equipment {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px dashed $border-light;
            border-radius: 4px;
            color: $text-tertiary;
          }
        }
      }
    }
  }
  
  .submit-apply-btn {
    width: 100%;
    height: 48px;
    background-color: $primary;
    color: white;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 500;
    margin-top: 24px;
    
    &:disabled {
      background-color: $border-light;
      color: $text-tertiary;
    }
    
    &:active:not(:disabled) {
      background-color: #0E42D2;
    }
  }
}

// 取消任务确认弹窗
.confirm-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  
  .modal-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s;
  }
  
  .confirm-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    max-width: 300px;
    background-color: $bg-white;
    border-radius: 12px;
    padding: 24px 16px;
    animation: scaleIn 0.3s;
    
    .confirm-title {
      font-size: 18px;
      font-weight: 600;
      color: $text-primary;
      text-align: center;
      margin-bottom: 12px;
    }
    
    .confirm-message {
      font-size: 14px;
      color: $text-secondary;
      text-align: center;
      margin-bottom: 24px;
      line-height: 1.6;
    }
    
    .confirm-actions {
      display: flex;
      
      .cancel-btn, .confirm-btn {
        flex: 1;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        border-radius: 8px;
      }
      
      .cancel-btn {
        background-color: $bg-light;
        color: $text-secondary;
        margin-right: 8px;
      }
      
      .confirm-btn {
        background-color: $danger;
        color: white;
        margin-left: 8px;
      }
    }
  }
}

// 设备选择器弹窗
.equipment-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  
  .modal-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s;
  }
  
  .equipment-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: $bg-white;
    border-radius: 16px 16px 0 0;
    padding: 20px 16px;
    max-height: 70vh;
    overflow-y: auto;
    animation: slideUp 0.3s;
  }
  
  .equipment-list {
    margin-top: 16px;
    
    .equipment-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 0;
      border-bottom: 1px solid $border-light;
      font-size: 16px;
      color: $text-primary;
      
      &:last-child {
        border-bottom: none;
      }
      
      &.selected {
        background-color: $primary-light;
      }
      
      .option-check {
        color: $primary;
      }
    }
  }
}

// 操作菜单
.action-sheet {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  
  .sheet-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s;
  }
  
  .sheet-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: $bg-white;
    border-radius: 16px 16px 0 0;
    animation: slideUp 0.3s;
    
    .sheet-item {
      display: flex;
      align-items: center;
      padding: 16px;
      font-size: 16px;
      color: $text-primary;
      
      .sheet-icon {
        margin-right: 12px;
        color: $text-secondary;
      }
    }
    
    .cancel-item {
      margin-top: 8px;
      background-color: $bg-light;
      color: $text-tertiary;
      text-align: center;
      border-radius: 0 0 16px 16px;
    }
  }
}

// 动画效果
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes scaleIn {
  from { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
</style>
    